<template>
<!--商家界面-->
<!-- 商家界面目前要写三个
1.开屏显示订单（涛）
2.更新订单状态（森）
3.点击订单价格就弹出具体订单详情（马 刘）-->

    <el-card style="margin: 20px;">
      <el-table  #default="scope">
        <el-table-column type="index" label="编号" width="80" align="center"  @click="displayOrderDetail(scope.row.id)"></el-table-column>
        <el-table-column label="客户id" prop="username" align="center"></el-table-column>
        <el-table-column label="客户名称" prop="phone" align="center"></el-table-column>
<!--        点击订单价格显示订单的菜品都有那些和备注是什么、客户id、客户电话所有字段，也可以修改状态-->
        <el-table-column label="订单价格" prop="createTime" align="center" @click=""></el-table-column>
        <el-table-column label="备注" prop="createTime" align="center"></el-table-column>
        <el-table-column label="订单状态" style="width:290px;">
          <el-select placeholder="请选择" v-model="xxx" @change="xxxx">
            <el-option label="已结算" value="1"/>
            <el-option label="未结算" value="0"/>
          </el-select>
        </el-table-column>
      </el-table>
    </el-card>

<!--点击价格弹出弹窗-->
  <el-dialog title="订单详情" v-model="OrderDetailVisible" style="padding:40px;">
    <el-table :data="UserArr">
      <el-table-column prop="brand" label="客户id" align="center"></el-table-column>
      <el-table-column prop="license" label="客户电话" align="center"></el-table-column>
    </el-table>
    <el-table :data="FoodArr">
      <el-table-column prop="license" label="菜品列表" align="center"></el-table-column>
      <el-table-column prop="license" label="订单价格(总价格)" align="center"></el-table-column>
      <el-table-column prop="license" label="备注" align="center"></el-table-column>
      <el-table-column label="订单状态" style="width:290px;">
        <el-select placeholder="请选择" v-model="xxx" @change="xxx">
          <el-option label="已结算" value="1"/>
          <el-option label="未结算" value="0"/>
        </el-select>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>

<script setup>
import { onMounted, ref } from "vue";
import axios from "axios";
import qs from "qs";
import { ElMessage } from "element-plus";

const OrderDetailVisible = ref(true);
//具体实食物菜单
const FoodArr = ref([]);
//具体实体用户
const UserArr = ref([]);

//切换状态






//显示订单具体详情
const displayOrderDetail = (id)=>{
  //让弹窗出现
  OrderDetailVisible.value = true;
  //根据用户id查询用户数据
  axios.get(BASE_URL+'/v1/user/select?id='+id).then((response)=>{
    if (response.data.code === 2000) {
      UserArr.value = response.data.data;
      FoodArr.value = response.data.data;
      console.log(FoodArr.value);
    } else {
      ElMessage.error(response.data.msg);
    }
  }).catch((error) => {
    ElMessage.error('请求发生错误：' + error.message);
  });
}




</script>

<style>

</style>
